import React, { Component } from 'react'

export default class App extends Component {
  // 子组件引用
  ageInput=React.createRef()
  state={
    uname:'',
    age:'18'
  }
  changeUname=(e)=>{
    let uname=e.target.value
    this.setState({uname})
  }
  doSubmit=()=>{
    console.log('向服务器提交数据1',this.state.uname);
    console.log('向服务器提交数据2',this.ageInput.current.value);

  }
  render() {
    
    return (
      <div>
        <h2>受控组件</h2>
        <input value={this.state.uname} placeholder='请输入用户名' onChange={this.changeUname}/>
        <div>输入的用户名是{this.state.uname}</div>
        <hr/>
        <h2>非受控组件</h2>
        <input ref={this.ageInput} defaultValue={this.state.age} placeholder='请输入年龄'/>
        <div>当前输入的年龄为{this.state.age}</div>
        <hr/>
        <button onClick={this.doSubmit}>提交</button> 
      </div>
    )
  }
}